<template>
  <div class="home-page">
    <!-- 轮播图部分 -->
    <div class="banner-container">
      <div class="carousel">
        <Carousel :items-to-show="1" :wrap-around="true" :autoplay="3000">
          <Slide v-for="(slide, index) in bannerSlides" :key="index">
            <div class="banner-slide" :style="{ backgroundColor: slide.bgColor }">
              <div class="slide-content">
                <div class="slide-text">
                  <h2 class="slide-title">{{ slide.title }}</h2>
                  <p class="slide-desc">{{ slide.description }}</p>
                  <a class="slide-btn" @click="slide.action ? slide.action() : navigateTo(slide.link)">
                    {{ slide.buttonText }}
                  </a>
                </div>
              </div>
            </div>
          </Slide>

          <template #addons>
            <Navigation />
            <Pagination />
          </template>
        </Carousel>
      </div>
    </div>

    <div class="sci-fi-container">
      <!-- <div class="sci-fi-header">
        <div class="slogan-container">
          <h2 class="slogan-text">速牛电控非官方最专业平台</h2>
          <div class="slogan-line"></div>
        </div>
      </div> -->

      <div class="nav-menu">
        <router-link to="/tire-calculator" class="menu-item" active-class="active">
          <div class="menu-icon">
            <div class="icon-circle">
              <!-- 改为极核风格图标 -->
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                <defs>
                  <linearGradient id="tireIconGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="#ff5a5a" />
                    <stop offset="100%" stop-color="#ff0000" />
                  </linearGradient>
                </defs>
                <circle cx="8" cy="8" r="7" fill="none" stroke="url(#tireIconGradient)" stroke-width="1" />
                <circle cx="8" cy="8" r="2" fill="url(#tireIconGradient)" />
                <path d="M8 1v2M8 13v2M1 8h2M13 8h2" stroke="url(#tireIconGradient)" stroke-width="1" />
                <path d="M3.5 3.5l1 1M11.5 11.5l1 1M3.5 11.5l1-1M11.5 3.5l1-1" stroke="url(#tireIconGradient)"
                  stroke-width="0.75" />
              </svg>
            </div>
            <div class="icon-pulse red-pulse"></div>
            <div class="icon-glow"></div>
          </div>
          <div class="menu-content">
            <div class="menu-title">轮胎周长计算</div>
            <div class="menu-desc">计算不同型号轮胎的周长参数</div>
          </div>
          <div class="menu-arrow">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </div>
        </router-link>

        <router-link to="/abs-calculator" class="menu-item" active-class="active">
          <div class="menu-icon">
            <div class="icon-circle">
              <!-- ABS齿圈图标 -->
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                <defs>
                  <linearGradient id="absIconGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="#ff5a5a" />
                    <stop offset="100%" stop-color="#ff0000" />
                  </linearGradient>
                </defs>
                <circle cx="8" cy="8" r="7" fill="none" stroke="url(#absIconGradient)" stroke-width="1" />
                <circle cx="8" cy="8" r="4" fill="none" stroke="url(#absIconGradient)" stroke-width="1" />
                <path d="M8 1v1M8 14v1M1 8h1M14 8h1" stroke="url(#absIconGradient)" stroke-width="0.75" />
                <!-- 齿圈表示 -->
                <path d="M8 4v1M10 8h1M8 11v1M5 8H4" stroke="url(#absIconGradient)" stroke-width="1.5" />
                <path d="M9.5 5.5l0.7 0.7M10.5 9.5l0.7 0.7M5.5 10.5l0.7 0.7M4.5 6.5l0.7 0.7"
                  stroke="url(#absIconGradient)" stroke-width="0.75" />
              </svg>
            </div>
            <div class="icon-pulse red-pulse"></div>
            <div class="icon-glow"></div>
          </div>
          <div class="menu-content">
            <div class="menu-title">ABS齿圈计算器</div>
            <div class="menu-desc">计算轮胎升级后的ABS齿圈参数</div>
          </div>
          <div class="menu-arrow">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </div>
        </router-link>

        <!-- <router-link to="/sign-in" class="menu-item" active-class="active">
          <div class="menu-icon">
            <div class="icon-circle red-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#ff3a3a" viewBox="0 0 16 16">
                <path
                  d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
                <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm0 14.5a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13z" />
              </svg>
            </div>
            <div class="icon-pulse red-pulse"></div>
          </div>
          <div class="menu-content">
            <div class="menu-title">每日签到</div>
            <div class="menu-desc">自助签到领取积分</div>
          </div>
          <div class="menu-arrow">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </div>
        </router-link> -->
        <router-link
          to="/iframes?url=https://c.cfmoto.com/ebook/h5/#/index?languageSign=zh&specificationId=222&sign=df3c34c66ff9000c136fb7a9f074a7ea"
          class="menu-item" active-class="active">
          <div class="menu-icon">
            <div class="icon-circle">
              <!-- 使用极核风格图标 -->
              <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                <defs>
                  <linearGradient id="zeehoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="#ff5a5a" />
                    <stop offset="100%" stop-color="#ff0000" />
                  </linearGradient>
                  <filter id="zeehoGlow" x="-50%" y="-50%" width="200%" height="200%">
                    <feGaussianBlur stdDeviation="1" result="blur" />
                    <feComposite in="SourceGraphic" in2="blur" operator="over" />
                  </filter>
                </defs>
                <!-- 外环 -->
                <circle cx="8" cy="8" r="7.5" fill="none" stroke="#ff3a3a" stroke-width="0.5" opacity="0.7" />
                <!-- 内环 -->
                <circle cx="8" cy="8" r="5" fill="none" stroke="url(#zeehoGradient)" stroke-width="1" />
                <!-- Z型图案 -->
                <path d="M5 5h6l-6 6h6" stroke="url(#zeehoGradient)" stroke-width="1.5" fill="none"
                  stroke-linecap="round" stroke-linejoin="round" filter="url(#zeehoGlow)" />
                <!-- 辐射线 -->
                <path d="M8 2v1.5M8 12.5V14M2 8h1.5M12.5 8H14" stroke="#ff3a3a" stroke-width="0.7" opacity="0.8" />
                <!-- 四角点 -->
                <circle cx="4" cy="4" r="0.5" fill="#ff3a3a" />
                <circle cx="12" cy="4" r="0.5" fill="#ff3a3a" />
                <circle cx="4" cy="12" r="0.5" fill="#ff3a3a" />
                <circle cx="12" cy="12" r="0.5" fill="#ff3a3a" />
              </svg>
            </div>
            <div class="icon-pulse red-pulse"></div>
            <div class="icon-glow"></div>
          </div>
          <div class="menu-content">
            <div class="menu-title">某核车型说明书</div>
            <div class="menu-desc">技术支持和售后服务信息</div>
          </div>
          <div class="menu-arrow">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </div>
        </router-link>
        <router-link to="/faq-contact" class="menu-item" active-class="active">
          <div class="menu-icon">
            <div class="icon-circle">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                <defs>
                  <linearGradient id="faqIconGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="#ff5a5a" />
                    <stop offset="100%" stop-color="#ff0000" />
                  </linearGradient>
                  <filter id="faqGlow" x="-50%" y="-50%" width="200%" height="200%">
                    <feGaussianBlur stdDeviation="0.5" result="blur" />
                    <feComposite in="SourceGraphic" in2="blur" operator="over" />
                  </filter>
                </defs>
                <circle cx="8" cy="8" r="7" fill="none" stroke="url(#faqIconGradient)" stroke-width="1" />
                <path d="M5.5 5.5c0-1.5 1.5-2 2.5-2s2.5.5 2.5 2c0 1.5-1.5 2-2 3-.15.3-.2.5-.2.9"
                  stroke="url(#faqIconGradient)" stroke-width="1.2" fill="none" stroke-linecap="round"
                  filter="url(#faqGlow)" />
                <circle cx="8" cy="12" r="0.8" fill="url(#faqIconGradient)" />
              </svg>
            </div>
            <div class="icon-pulse red-pulse"></div>
            <div class="icon-glow"></div>
          </div>
          <div class="menu-content">
            <div class="menu-title">常见问题与联系</div>
            <div class="menu-desc">技术支持和售后服务信息</div>
          </div>
          <div class="menu-arrow">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </div>
        </router-link>
      </div>

      <div class="tech-background">
        <div class="circuit-lines"></div>
        <div class="glow-effect"></div>
      </div>

      <div class="sci-fi-footer">
        <div class="tech-line"></div>
        <div class="footer-text">科技引领未来 · 慢牛引领电控</div>
        <!-- 备案 -->
        <div style="display: flex;align-items: center;justify-content: center;"><img
            src="https://beian.mps.gov.cn/img/logo01.dd7ff50e.png" style=" width: 15px;margin-right: 2px;"><a
            href="https://beian.miit.gov.cn/" style="color:#fff;font-size: 15px;" target="_blank">京ICP备2024047869号-1</a>
        </div>
      </div>
    </div>

    <!-- 海报弹窗 -->
    <div class="poster-modal" v-if="showPoster" @click="showPoster = false">
      <div class="poster-container" @click.stop>
        <div class="poster-images">
          <img :src="posterImage1" alt="控制器公测计划 1" class="poster-image">
          <img :src="posterImage2" alt="控制器公测计划 2" class="poster-image">
        </div>
        <button class="close-btn" @click="showPoster = false">×</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Carousel, Navigation, Pagination, Slide } from 'vue3-carousel';
import 'vue3-carousel/dist/carousel.css';
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import logoImage from '@/assets/logo_modern.svg';
import posterImage1 from '@/assets/haibao/1.png';
import posterImage2 from '@/assets/haibao/2.png';

const router = useRouter();
const showPoster = ref(false);

// 导航方法
function navigateTo(path) {
  router.push(path);
}

// 显示海报
function showControllerPoster() {
  showPoster.value = true;
}

// 轮播图数据
const bannerSlides = [
  {
    title: "轮胎周长计算器",
    description: "轻松计算轮胎周长，测量车轮转速来计算速度",
    buttonText: "立即使用",
    link: "/tire-calculator",
    bgColor: "#000000"
  },
  // {
  //   title: "72700高性能控制器",
  //   description: "性能操控更强大，满足极限骑行需求",
  //   buttonText: "了解更多",
  //   link: "/controller-categories",
  //   bgColor: "#180000"
  // },
  {
    title: "ABS齿圈计算器",
    description: "计算轮胎升级后的ABS齿圈参数",
    buttonText: "去计算",
    link: "/abs-calculator",
    bgColor: "#220000"
  },
  {
    title: "极核车型说明书",
    description: "技术支持和车型信息以及查看常见问题",
    buttonText: "立即查看",
    link: "/iframes?url=https://c.cfmoto.com/ebook/h5/#/index?languageSign=zh&specificationId=222&sign=df3c34c66ff9000c136fb7a9f074a7ea",
    bgColor: "#220000"
  }
];
</script>

<style lang="scss" scoped>
.home-page {
  background: #0d0d0d url('') repeat;
  color: #e0f7fa;
  font-family: 'Microsoft YaHei', sans-serif;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

// 轮播图样式
.banner-container {
  width: 100%;
  max-height: 25vh;

  .carousel {
    width: 100%;
    max-height: 25vh;

    :deep(.carousel__slide) {
      padding: 0;
    }

    :deep(.carousel__viewport) {
      perspective: 1000px;
    }

    :deep(.carousel__track) {
      transform-style: preserve-3d;
    }

    :deep(.carousel__pagination) {
      padding: 5px 0;

      .carousel__pagination-button {
        &::after {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.5);
        }

        &--active::after {
          background-color: #ff0000;
        }
      }
    }

    :deep(.carousel__prev),
    :deep(.carousel__next) {
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      width: 40px;
      height: 40px;

      &:hover {
        background-color: rgba(0, 0, 0, 0.8);
      }
    }
  }
}

.banner-slide {
  width: 100%;
  height: 25vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
    z-index: 1;
  }

  .slide-content {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    padding: 20px;
  }

  .slide-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .slide-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  .slide-desc {
    margin-bottom: 15px;
    color: #f0f0f0;
  }

  .slide-btn {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 8px 20px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: 0.5s;
    }

    &:hover {
      background-color: var(--primary-hover);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(255, 0, 0, 0.5);

      &::after {
        left: 100%;
      }
    }
  }
}

.sci-fi-container {
  flex: 1;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 12px 12px 0 0;
  padding: 15px 15px 0 15px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(75vh - 60px);

  &::-webkit-scrollbar {
    width: 5px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(255, 58, 58, 0),
        rgba(255, 58, 58, 0.8),
        rgba(255, 58, 58, 0));
  }
}

.sci-fi-header {
  margin-bottom: 20px;
}

.slogan-container {
  text-align: center;
  // margin-bottom: px;
  position: relative;
}

.slogan-text {
  font-size: 16px;
  color: var(--primary-color);
  margin: 0;
  padding: 10px 0;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
  letter-spacing: 1px;
}

.slogan-line {
  height: 2px;
  background: linear-gradient(90deg,
      rgba(255, 58, 58, 0),
      rgba(255, 58, 58, 0.8),
      rgba(255, 58, 58, 0));
  margin-top: 10px;
}

/* 菜单项样式 */
.nav-menu {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 15px;
}

.menu-item {
  margin: 0 2px;
  display: flex;
  align-items: center;
  padding: 8px;
  background-color: rgba(20, 20, 20, 0.8);
  border-radius: 8px;
  transition: all 0.3s;
  border: 1px solid rgba(255, 58, 58, 0.2);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

  // &:hover {
  //   transform: translateY(-2px);
  //   background-color: rgba(30, 30, 30, 0.9);
  //   border-color: rgba(255, 58, 58, 0.5);
  //   box-shadow: 0 4px 15px rgba(255, 0, 0, 0.25);

  //   .menu-title {
  //     color: #ff3a3a;
  //   }

  //   .icon-circle {
  //     transform: scale(1.1);
  //     box-shadow: 0 0 15px rgba(255, 58, 58, 0.8);
  //   }

  //   .icon-glow {
  //     opacity: 1;
  //   }

  //   &::after {
  //     transform: translateX(100%);
  //   }
  // }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 58, 58, 0.1),
        transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
  }
}

.menu-item.red-style {
  background-color: rgba(40, 0, 0, 0.8);
  border-left: 3px solid #ff3a3a;

  &:hover {
    background-color: rgba(50, 0, 0, 0.9);
    border-left-color: #ff5555;
  }

  .icon-circle.red-icon {
    background-color: #ff3a3a;
  }
}

.menu-icon {
  position: relative;
  width: 40px;
  height: 40px;
  margin-right: 15px;

  .icon-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(20, 20, 20, 0.9);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(255, 58, 58, 0.3);
    z-index: 2;
  }

  .icon-pulse {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 58, 58, 0.4);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s;
    animation: pulse 2s infinite;
    z-index: 1;
  }

  .icon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: radial-gradient(circle, rgba(255, 58, 58, 0.6) 0%, rgba(255, 58, 58, 0) 70%);
    border-radius: 50%;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    z-index: 0;
    animation: glowPulse 2s infinite alternate;
  }

  .red-pulse {
    border-color: rgba(255, 58, 58, 0.7);
    animation: redPulse 2s infinite;
  }
}

@keyframes glowPulse {
  0% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(0.9);
  }

  100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 0.4;
  }

  100% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.8;
  }
}

@keyframes redPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 58, 58, 0.4);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 0 10px 3px rgba(255, 58, 58, 0.2);
  }

  100% {
    transform: translate(-50%, -50%) scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 58, 58, 0.4);
  }
}

.menu-content {
  flex: 1;
}

.menu-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  transition: all 0.3s;
}

.menu-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.menu-arrow {
  color: rgba(255, 58, 58, 0.8);
  transition: transform 0.3s;
}

.menu-item:hover .menu-arrow {
  transform: translateX(3px);
}

.tech-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.2;
}

.circuit-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(90deg, rgba(255, 58, 58, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(255, 58, 58, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
}

.glow-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 58, 58, 0.1), transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0.5;
  animation: glow 8s infinite alternate;
}

@keyframes glow {
  0% {
    opacity: 0.3;
    width: 300px;
    height: 300px;
  }

  100% {
    opacity: 0.6;
    width: 450px;
    height: 450px;
  }
}

/* 海报弹窗样式 */
.poster-modal {
  position: fixed;
  top: 30px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;

  .poster-container {
    position: relative;
    max-width: 95%;
    max-height: 95%;
    overflow: auto;
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(255, 58, 58, 0.2);

    .poster-images {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      padding: 20px;

      .poster-image {
        max-width: 45%;
        max-height: 85vh;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(255, 58, 58, 0.5);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

        &:hover {
          transform: scale(1.04) translateY(-10px);
          box-shadow: 0 20px 40px rgba(255, 58, 58, 0.7);
        }

        @media (max-width: 768px) {
          max-width: 90%;
        }
      }
    }

    .close-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 58, 58, 0.9);
      border: none;
      color: white;
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 0 15px rgba(255, 58, 58, 0.4);

      &:hover {
        background: #ff3a3a;
        transform: rotate(90deg);
        box-shadow: 0 0 20px rgba(255, 58, 58, 0.8);
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.sci-fi-footer {
  margin-top: auto;
  text-align: center;
  position: relative;
  padding-bottom: 10px;
}

.tech-line {
  height: 2px;
  background: linear-gradient(90deg,
      rgba(255, 58, 58, 0),
      rgba(255, 58, 58, 0.8),
      rgba(255, 58, 58, 0));
  margin-bottom: 5px;
}

.footer-text {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 2px;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
}
</style>